<template>
  <div class="flex justify-center items-center min-h-screen p-5 bg-gray-100">
    <div class="w-full max-w-[600px] p-10 bg-white rounded-lg shadow-xl">
      <h2 class="text-center mb-8 text-2xl text-gray-800">重置密码</h2>
      <form @submit.prevent="handleReset" class="space-y-6">
        <!-- 用户名 -->
        <div class="space-y-2">
          <label class="block text-sm font-medium text-gray-600">用户名</label>
          <input
              v-model="username"
              type="text"
              required
              placeholder="请输入用户名"
              class="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-emerald-500"
          />
        </div>

        <!-- 邮箱 -->
        <div class="space-y-2">
          <label class="block text-sm font-medium text-gray-600">注册邮箱</label>
          <input
              v-model="email"
              type="email"
              required
              placeholder="请输入注册邮箱"
              class="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-emerald-500"
          />
        </div>

        <!-- 新密码 -->
        <div class="space-y-2">
          <label class="block text-sm font-medium text-gray-600">新密码</label>
          <input
              v-model="newPassword"
              type="password"
              required
              placeholder="请输入新密码"
              class="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-emerald-500"
          />
        </div>

        <!-- 确认新密码 -->
        <div class="space-y-2">
          <label class="block text-sm font-medium text-gray-600">确认新密码</label>
          <input
              v-model="confirmNewPassword"
              type="password"
              required
              placeholder="请再次输入新密码"
              class="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-emerald-500"
          />
        </div>

        <!-- 错误提示 -->
        <div v-if="errorMessage" class="text-red-500 text-sm">
          {{ errorMessage }}
        </div>

        <!-- 重置按钮 -->
        <button
            type="submit"
            class="w-full py-2 bg-[#0cc2edff] hover:bg-emerald-600"
        >
          重置密码
        </button>

        <!-- 返回登录 -->
        <div class="mt-4 text-center text-gray-600">
          <router-link to="/login" class="text-emerald-500">返回登录</router-link>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      email: '',
      newPassword: '',
      confirmNewPassword: '',
      errorMessage: ''
    }
  },
  methods: {
    handleReset() {
      if (this.newPassword !== this.confirmNewPassword) {
        this.errorMessage = '两次输入的新密码不一致'
        return
      }

      const users = JSON.parse(localStorage.getItem('users')) || []
      const userIndex = users.findIndex(
          u => u.username === this.username && u.email === this.email
      )

      if (userIndex === -1) {
        this.errorMessage = '用户名或邮箱不匹配'
      } else {
        users[userIndex].password = this.newPassword
        localStorage.setItem('users', JSON.stringify(users))
        alert('密码已重置，请重新登录')
        this.$router.push('/login')
      }
    }
  }
}
</script>